<template>
  <el-card>
    <div class="stat-card">
      <div class="card-header">
        <span class="title-line" />
        <span class="title">领取详情</span>
      </div>
      <div v-loading="loading" :element-loading-text="loadingText" :element-loading-spinner="loadingSpinner" class="card-body">
        <!-- 列表数据 start -->
        <el-table :data="tableData" tooltip-effect="dark" class="table-wrapper" style="width: 100%" header-cell-class-name="yk-list-table-header-cell">
          <el-table-column prop="ticket_issue_no" label="活动券期号" show-overflow-tooltip />
          <el-table-column label="卡券类型" show-overflow-tooltip>
            <template slot-scope="scope">
              <coupon-type :row="{ ...scope.row, coupon_type: scope.row.ticket_coupon_type }"></coupon-type>
            </template>
          </el-table-column>
          <el-table-column label="优惠信息" show-overflow-tooltip>
            <template slot-scope="scope">
              <coupon-info :row="getTicketInfo(scope.row)"></coupon-info>
            </template>
          </el-table-column>
          <el-table-column prop="nick_name" label="领取用户" show-overflow-tooltip />
          <el-table-column prop="create_time" label="领取时间" show-overflow-tooltip />
          <el-table-column prop="end_time" label="有效期" show-overflow-tooltip />
          <el-table-column prop="status_text" label="使用状态" show-overflow-tooltip />
          <el-table-column label="使用时间" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.status !== 0">{{ scope.row.update_time }}</span>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>
        <!-- 列表数据 end -->
        <!-- 分页 start -->
        <el-row type="flex" justify="end" class="pagination">
          <el-pagination
            :current-page.sync="paginate.page"
            :page-size="paginate.count"
            :page-sizes="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="loadTableData"
          />
        </el-row>
        <!-- 分页 end -->
      </div>
    </div>
  </el-card>
</template>

<script>
import CouponType from '@/pages/market/ticket/manage/components/couponType';
import CouponInfo from '@/pages/market/ticket/manage/components/couponInfo';
import site from '@/site.js';

export default {
  name: 'Index',
  components: {
    CouponType,
    CouponInfo
  },
  props: {
    ticketId: {
      type: [String, Number],
      default: 0
    },
    couponId: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      loading: false,
      loadingText: '',
      loadingSpinner: '-',
      // 总数量
      total: 0,
      paginate: {
        count: 10,
        page: 1
      },
      pageSize: site.page_sizes,
      tableData: []
    };
  },
  watch: {
    ticketId() {
      this.loadTableData();
    },
    couponId() {
      this.loadTableData();
    }
  },
  created() {
    this.loadTableData();
  },
  methods: {
    loadTableData() {
      this.loading = true;
      if (!this.ticketId) {
        this.loadingText = '数据出错';
        return;
      }
      this.loadingSpinner = 'el-icon-loading';
      this.loadingText = '数据加载中';
      // 参数
      const params = {
        ticket_id: this.ticketId,
        coupon_id: this.couponId,
        ...this.paginate
      };

      // 获取数据
      this.$http.get(
        '/admin/data/ticket/table/data',
        params,
        ({ data }) => {
          const {
            datas = [],
            paginate: { total }
          } = data;
          this.tableData = datas;
          this.total = total;
          this.loading = false;
        },
        ({ msg }) => {
          this.loadingText = msg;
        },
        false
      );
    },
    // 活动券信息
    getTicketInfo(row) {
      return {
        issue_noL: row.ticket_issue_no,
        coupon_type: row.ticket_coupon_type,
        maxprice: row.ticket_maxprice,
        price: row.ticket_price,
        discount: row.ticket_discount
      };
    }
  }
};
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';

.stat-card {
  @include card-header;

  .card-body {
    margin-top: 26px;
  }
}

.table-wrapper {
  //margin: 0 50px 32px 20px;
  margin-top: 10px;

  ::v-deep .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
    font-size: 12px;
    line-height: 1;
    margin-left: 10px;
  }

  ::v-deep .el-table {
    color: #333;
  }

  ::v-deep .el-table thead {
    color: #999;
  }

  ::v-deep thead.has-gutter th,
  ::v-deep thead th {
    background-color: #f6f9ff;
  }

  .el-icon-rank {
    font-size: 16px;
    cursor: move;
    margin-right: 5px;
  }
}
.pagination {
  padding: 20px 0;
}
</style>
